import React, {useState} from "react";
import {Form, Input, Modal, Spin} from "antd";

interface FormProps {
    visible: boolean;
    onCancel: () => void;
}

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
};

export const GroupCreate:React.FC<FormProps> = ({visible, onCancel}) => {

    const [spinning, setSpinning] = useState<boolean>(false)

    const [form] = Form.useForm()

    const saveGroup = () => {

    }

    return <Modal
        destroyOnClose
        maskClosable={false}
        visible={visible}
        title="增加服务"
        okText="保存"
        cancelText="取消"
        onOk={saveGroup}
        onCancel={onCancel}
    >
        <Spin tip="正在保存......" spinning={spinning}>
            <Form
                {...layout}
                form={form}
                layout="horizontal"
            >
                <Form.Item name="title" label="服务名称" rules={[{required: true, message: '请输入服务名称'}]}>
                    <Input placeholder="服务名称" />
                </Form.Item>
                <Form.Item name="desc" label="服务描述">
                    <Input.TextArea rows={3} placeholder="服务描述" />
                </Form.Item>
            </Form>
        </Spin>
    </Modal>


}